<template>
  <div>
    <ol class="breadcrumb">
      <li class="breadcrumb-item">系统管理</li>
      <li class="breadcrumb-item active">部门管理</li>
    </ol>
    <div class="card mb-3 mx-3">
      <div class="layer-loading" v-show="loading"><i></i><i></i><i></i></div>
      <div class="text-muted p-3 pb-0">权限过虑.</div>
      <form action="/department" class="form-inline p-3" autocomplete="off" @submit.prevent="paging">
        <div class="form-group mr-sm-2">
          <input name="name" v-model="param.name" placeholder="用户名 / 手机号" class="form-control">
        </div>
        <button class="btn btn-outline-info">搜索</button>
        <router-link class="btn btn-outline-info rounded ml-sm-auto" to="/department/new"><i class="fa fa-user-plus"></i> 新增</router-link>
      </form>
      <table class="table table-advanced table-hover treetable" ref="treetable">
        <thead>
        <tr>
          <th>部门名称</th>
          <th>负责人</th>
          <th class="hidden-md-down">更新时间</th>
          <th class="text-xs-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr :data-tt-id="item.id" :data-tt-parent-id="item.parent" :data-level="item.level" v-for="(item, index) in items" :key="item.id">
          <td>
            <router-link :to="'/department/' + item.id"><i :class="item.icon"></i>{{item.name}}</router-link>
          </td>
          <td class="hidden-sm-down">{{item.leaderName}}</td>
          <td class="hidden-lg-down">{{item.updated}}</td>
          <td class="text-xs-center table-actions">
            <div class="hidden-sm-down">
              <router-link :to="'/department/' + item.id"><i class="fa fa fa-pencil"></i>编辑</router-link>
              <router-link :to="'/department/new?parent=' + item.id"><i class="fa fa-angle-double-down"></i>添加下级</router-link>
              <a class="text-danger" @click="del(item.id, index)"><i class="fa fa-trash-o"></i>删除</a>
            </div>
            <div class="hidden-md-up">
              <div class="btn-group-sm dropdown">
                <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-cog"></i></button>
                <div class="dropdown-menu float-right" role="menu">
                  <router-link :to="'/department/' + item.id" class="dropdown-item text-primary"><i class="fa fa fa-pencil"></i>编辑</router-link>
                  <router-link :to="'/department/new?parent=' + item.id" class="dropdown-item text-primary"><i class="fa fa-angle-double-down"></i>添加下级</router-link>
                  <a class="dropdown-item text-danger" @click="del(item.id, index)"><i class="fa fa-trash-o"></i>删除</a>
                </div>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
  import {Department} from '../../resources'
  import '../../../static/libs/jquery-treetable/jquery.treetable'
  import swal from 'sweetalert'
  import $ from 'jquery'

  function treeify (el) {
    return $(el).treetable({
      indent: 33,
      expandable: true,
      initialState: 'expanded', // Possible values: "expanded" or "collapsed"
      expanderTemplate: '<label>&nbsp;</label>',
      clickableNodeNames: false
    })
  }

  export default {
    data: () => ({
      loading: false,
      param: {parent: ''},
      items: []
    }),
    beforeRouteEnter(to, from, next) {
      Department.treetable().then(response => {
        next(vm => {
          vm.items = response.data
          vm.$nextTick(() => {
            vm.$treetable = treeify(vm.$refs.treetable)
            vm.$emit('loaded')
          })
        })
      })
    },
    methods: {
      del (id, index) {
        var vm = this
        swal({
          type: 'warning',
          title: '您确定?',
          text: '删除的记录将不能恢复!',
          showCancelButton: true,
          cancelButtonText: '取消',
          confirmButtonText: '是的, 我要删除!',
          confirmButtonColor: '#DD6B55',
          showLoaderOnConfirm: true,
          closeOnConfirm: false
        }, confirmed => {
          if (confirmed) {
            vm.loading = true
            Department.delete(id).then(response => {
              vm.loading = false
              if (response.data.success) {
                swal('已删除!', '您指定的记录已被删除.', 'success')
                return vm.items.splice(index, 1)
              }
              swal('删除失败!', response.msg, 'error')
            }, response => {
              swal('操作失败', response.responseJSON.msg, 'error')
              vm.loading = false
            })
          }
        })
      }
    }
  }
</script>
